<template>
    <div class="mainSty">
        <div style="height: 68px;"></div>
        <div class="flex_str">
            <div>当前账户余额: {{ myAssets.surplusCoin || 0 }} 户币 </div>
            <img src="@/assets/img/security.png" style="width: 24px;margin-left: 20px;">
        </div>
        <div style="margin-top:12px;">累计充值: {{ myAssets.totalRechargeAmount || 0 }} 元</div>

        <div class="moneySty">
            <div style="width:14%">充值数量:</div>
            <div class="flex_str moneyBoxSty">
                <div class="moneyItemSty" v-for="(item, index) in PackageList" :key="index"
                    :style="playId == item.id ? 'background-color: #06B2FA;color: #fff' : ''"
                    @click="choosePlayType(item.id, item.amount)">
                    <div>{{ item.goldCoin }} 户币</div>
                    <div><span style="color: #C8656D;"> {{ item.amount }}  ￥</span> </div>
                    <div class="playName" :title="item.description">{{ item.description }}</div>
                </div>
            </div>
        </div>
        <div class="flex_str" style="margin-top: 20px;">
            <div>自定义数量:</div>
            <input placeholder="请输入充值户币数量" class="iptSty" v-model="amount" @focus="iptOnblur" />
        </div>

        <div style="margin-top:12px;">应付金额: {{ playAmount }} 元</div>
        <div class="playSty">
            <div>支付方式:</div>
            <!-- <div class="flex_str playItemSty">
                <img src="@/assets/img/zhifubao.png" class="imgSty">
                <div>支付宝</div>
            </div> -->
            <div class="flex_str playItemSty">
                <img src="@/assets/img/weixin.png" class="imgSty">
                <div>微信</div>
            </div>
        </div>

        <div class="playBtn" @click="play">立即支付</div>
        <div class="footerSty">
            户币用于户享邦网站平台下载交易，1元等于1户币，收益满200元可以提现，收益也可用于兑换户币，充值户币及VIP赠送户币不可提现，非SVIP提现收取5%手续费，SVIP不收取手续费！充值如需发票请联系客服
        </div>
        <div class="footerSty" style="margin-top:16px;">
            温馨提示：支付成功后，预计5分钟内到账，请耐心等待
        </div>
    </div>
    <div class="bg" v-if="codeShow">
        <div class="qrcodeSty flex_cen">
            <qrcode-vue :value="url" :size="qcsize" level="H" />
            <div style="margin-top: 10px;color: #ccc;">请用手机扫码进行支付</div>
            <div class="codeFooterSty">
                <div class="footerBtn" @click="codeShow = false">取消</div>
                <div class="addSty" @click="codeShow = false">已支付</div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { getMineAssetsApi, getPackageListApi, wechartPlayApi,getPayStatetApi } from '@/api/index/index'
import { ElMessage } from 'element-plus';
import QrcodeVue from 'qrcode.vue'
const qcsize = 120
const codeShow = ref(false)
const url = ref('https://www.baidu.com/')
const myAssets = ref<any>({})
const PackageList = ref<any>([])
const playId = ref<any>()
const amount = ref<any>('')
const playAmount = ref<any>('0')
const getMyAssets = () => {
    getMineAssetsApi().then((res: any) => {
        myAssets.value = res.data
    })
}
const getPackageList = () => {
    getPackageListApi().then((res: any) => {
        playId.value = res.data[0].id
        playAmount.value = res.data[0].amount
        PackageList.value = res.data
    })
}
const play = () => {
    if (playAmount.value < 0) {
        ElMessage.error('金额错误!')
        return
    }
    let params = {
        id: playId.value,
        amount: playAmount.value
    }
    wechartPlayApi(params).then((res: any) => {
        url.value = res.data.code_url
        codeShow.value = true
    })
}
const payed = ()=>{
    getPayStatetApi().then(()=>{
        getMyAssets()
    })
    codeShow.value = false
}
const choosePlayType = (id: any, money: any) => {
    playId.value = id
    playAmount.value = money
    amount.value = ''
}
const iptOnblur = (e: any) => {
    playId.value = ''
    playAmount.value = '0'
}
onMounted(() => {
    getMyAssets()
    getPackageList()
})
watch(() => amount.value,
    (val) => {
        playAmount.value = val
    })
</script>
<style scoped>
.bg {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0, 0, 0, .3);
    z-index: 90;
}
.addSty{
    width: 120px;
    height: 36px;
    line-height:36px;
    border-radius: 4px;
    text-align: center;
    background: #06B2FA;
    color: #fff;
}
.qrcodeSty {
    position: fixed;
    top: 20%;
    left: 40%;
    width: 22%;
    height: 360px;
    background-color: #fff;
    flex-direction: column;
    z-index: 99;
}
.footerBtn{
    width: 120px;
    height: 36px;
    line-height:36px;
    border-radius: 4px;
    text-align: center;
    background-color: rgb(223, 220, 220);
}
.codeFooterSty{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 40px;
    width: 100%;
}
.playBtn {
    width: 20%;
    height: 44px;
    line-height: 44px;
    color: #fff;
    text-align: center;
    font-size: 22px;
    border-radius: 22px;
    margin: 55px 0;
    margin-left: 40%;
    background-color: #06B2FA;
}

.playItemSty {
    border-radius: 10px;
    margin: 0 12px;
    padding: 5px 20px;
}

.imgSty {
    width: 26px;
    margin: 0 10px;
}

.iptSty {
    background: #F8F7F0;
    border: 1px solid #ccc;
    width: 220px;
    height: 30px;
    margin-left: 12px;
}

.iptSty:focus {
    border: 0 !important;
}

.mainSty {
    width: 60%;
    margin-left: 20%;
}

.moneySty {
    width: 100%;
    margin-top: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.moneyItemSty {
    border-radius: 10px;
    width: 24%;
    height: 120px;
    line-height: 30px;
    margin: 0 12px;
    padding: 20px 12px;
    background-color: #fff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
    text-align: center;
}

.playSty {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.playName {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    text-align: right;
}

.moneyBoxSty {
    width: 86%;
}
</style>